<template>
  <div class="account-list">
    <div v-if="isSuperAdmin" class="create-project-box">
      <el-button size="small" type="primary" @click="addAccountClick">创建项目</el-button>
      <add-article ref="AddAccount" @reload="$refs.WPagination.reload()"/>
    </div>
    <el-table
      :data="dataArr"
      border
      style="width: 100%">
      <el-table-column
        label="项目名称"
        width="300">
        <template slot-scope="scope">
          {{ scope.row.name }}
          <el-tag v-if="scope.row.status === 1" type="danger" size="small">已删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createUser.name"
        width="180"
        label="创建人">
      </el-table-column>
      <el-table-column
        prop="createTimeStr"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="description"
        label="项目描述">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isSuperAdmin" class="opt-btn" type="text" @click="removeBtnClick(scope.row)">删除</el-button>
          <el-button v-if="isSuperAdmin" class="opt-btn" type="text" @click="addAccountClick(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.status !== 1" class="opt-btn" type="text" @click="enumClick(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <w-pagination v-if="isSuperAdmin" ref="WPagination" :total="total" @pageChange="reloadLoad"/>
    <change-aiticle ref="ChangeAiticle"/>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import AddArticle from './com/addAiticle/index.vue'
  import WPagination from '@/components/global/pagination/index.vue'
  import ArticleModel from '@/models/ArticleModel'
  import WPopView from '@/utils/popView'
  import ChangeAiticle from './com/changeAiticle/index.vue'
  import { Getter } from 'vuex-class'
  import { AddAiticle } from './com/addAiticle/types'
  import { ListType, PageDataType } from '@/models/types'
  import { Pagination } from '@/components/global/pagination/types'
  import AccountModel from "@/models/AccountModel";

  @Component({
    name: 'ArticleList',
    components: {
      AddArticle,
      WPagination,
      ChangeAiticle
    }
  })
  export default class AccountList extends Vue{

    @Getter('isSuperAdmin') isSuperAdmin!: boolean

    dataArr: Array<ArticleModel> = []
    total = 0

    /**
     * 添加按钮点击
     */
    addAccountClick(souce?: ArticleModel) {
      (this.$refs.AddAccount as AddAiticle).show(souce)
    }

    /**
     * 刷新数据
     */
    reloadLoad(pageData: PageDataType) {
      if (pageData.pageNum === 1) {
        this.dataArr = []
      }
      ArticleModel.loadModels<ArticleModel>(pageData).then((data: ListType<ArticleModel>) => {
        this.total = data.total
        this.dataArr = data.list
      })
    }
    /**
     * 删除按钮点击
     */
    removeBtnClick(model: ArticleModel) {
      model.removeData(`确定要删除【${model.name}】这个项目吗？ `).then(() => {
        WPopView.msgSuccess('删除成功');
        (this.$refs.WPagination as Pagination).reload()
      })
    }
    enumClick(model: ArticleModel) {
      this.$router.push(`/article/list/${model._id}`)
    }
    /**
     * 获取当前账户下的项目列表
     */
    projectList() {
      AccountModel.projectList().then((dataArr: Array<ArticleModel>) => {
        this.dataArr = dataArr
      })
    }
    mounted() {
      if (!this.isSuperAdmin) {
        this.projectList()
      }
    }

  }

</script>

<style scoped lang="scss">
.account-list {
  .current-account {
    color: coral;
  }
  .create-project-box {
    padding-bottom: 20px;
  }
  .opt-btn {
    padding: 0;
  }
}
</style>
